<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>简易行政区地图标注</title>
    <!-- jquery链接 -->
    <script src="../jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
    <!-- key -->
    <script language="javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=d70cc4ab1718d09ff105699312120a22&plugin=AMap.Scale,AMap.ToolBar"></script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
</head>
<style type="text/css">
    /* html,
    body, */
    * {
        margin: 0;
        padding: 0;
    }

    .map {
        width: 1160px;
        /* background: white !important; */
        height: 620px;
        margin: 0px auto;
        background-color: #F2F5FA;
    }

    .table-flom {
        width: 1160px;
        height: 500px;
        margin-bottom: 500px;
        margin: auto;
    }

    tr,
    th,
    td {
        text-align: center;
    }

    th {
        background-color: #77BEF8;
    }

    .legend {
        width: 150px;
        height: 260px;
        position: absolute;
        left: 10px;
        bottom: 25px;
        /* background-color: #fff; */
        border-radius: 5px;
        /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); */
        margin-bottom: 50px;
    }

    .legend ul {
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .legend ul li {
        float: left;
        height: 30px;
    }

    .legend ul li a {
        display: block;
        float: left;
        color: #555;
        font-size: 14px;
        text-decoration: none;
        height: 30px;
        line-height: 45px;
    }

    .legend ul li span {
        float: left;
        width: 30px;
        height: 30px;
        margin: 8px;
        border-radius: 50%;
    }

    li {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .title0 {
        width: 100%;
        height: 350px;
        background: #8FEBB0;
    }

    .title {
        width: 1160px;
        height: 230px;
        /* background-color: antiquewhite; */
        margin: auto;
    }

    .title1 div {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: yellow;
        float: left;
        list-style: none;
        margin: 50px 95px 0px 95px;
        border-radius: 100%;
    }

    .title2 div {
        width: 150px;
        height: 30px;
        float: left;
        text-align: center;
        margin: 0 70px;
    }

    .data_toggle .show {
        display: block;
    }

    .data_toggle {
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #009cfa;
        /* display: none; */
        cursor: pointer;
        text-align: center;
        background: #f1f5f9;
        border-radius: 0 0 3px 3px;
        text-decoration: none;
    }
</style>

<body>
    <!-- <div id="title0"> -->
    <div class="title">
        <div class="title1">
            <div id="t1" style="background:#3FCBFB"></div>
            <div id="t2" style="background: #93E2B9;"></div>
            <div id="t3" style="background: #FD8887;"></div>
            <div id="t4" style="background: #8FEBB0;"></div>
        </div>
        <div class="title2">
            <div id="p1"></div>
            <div id="p2"></div>
            <div id="p3"></div>
            <div id="p4"></div>
        </div>
    </div>
    <!-- </div> -->

    <div id="container" class="map" tabindex="0">
        <div class="legend" id="legend">
            <ul></ul>
        </div>
    </div>

    <div class="table-flom">
        <table class="table table-striped table-bordered table-hover table-condensed" id="table">
            <thead>
                <tr>
                    <th>监测点</th>
                    <th>监测点IP</th>
                    <th>链路耗时</th>
                    <th>监测时间</th>
                </tr>
            </thead>
            <tbody id="tab"></tbody>
        </table>
        <a class="data_toggle show">查看所有监测点数据</a>
    </div>

</body>
<script type="text/javascript">

    var mapData = []
    $(function () {
        // 显示地图
        showMap()
        // 显示列表
        showList()




        // $.ajax({
        //     method: 'GET',
        //     url: 'https://liu.zzgoodqc.cn/gaode',
        //     dataType: 'json',
        //     success: function (res) {
        //         console.log('成功');
        //         console.log(res.data);
        //     },
        //     error: function () {
        //         console.log('失败');
        //     },
        //     complete: function () {
        //         console.log('已完成');
        //     },
        // })

    })

    function showList() {
        $.ajax({
            url: "https://liu.zzgoodqc.cn/gaode",
            method: "GET",
            dataType: "json",
            success: function (e) {
                // mapData = res.data.data
                mapData.push(e.data.data.province)
                // 获取头部的信息
                let monitoring = e.data.data.monitoring;
                console.log(monitoring);
                let min = e.data.data.min.province;
                let minVal = e.data.data.min.val;
                let minCity = e.data.data.min.city;
                let max = e.data.data.max.province;
                let maxVal = e.data.data.max.val;
                let maxCity = e.data.data.max.city;
                let average = e.data.data.avg;
                // 头部数据
                $("#t1").html(monitoring + "个");
                $("#t2").html(minVal + "ms");
                $("#t3").html(maxVal + "ms");
                $("#t4").html(average + "ms");
                // 头部信息
                $("#p1").html("监测点");
                $("#p2").html("最快" + min + "省" + "[" + minCity + "]");
                $("#p3").html("最慢" + max + "省" + "[" + maxCity + "]");
                $("#p4").html("平均");
                console.log(min);
                // 页面渲染
                var res = e.data.data.province;
                console.log(res);
                let str = "";
                for (var i in res) {
                    for (var j in res[i].children) {
                        str += `<tr>
                                    <td>${res[i].children[j].city}${"[" + res[i].children[j].service + "]"}</td>
                                    <td>${res[i].children[j].ip}</td>
                                    <td>${res[i].children[j].net_time}</td>
                                    <td>${res[i].children[j].update_time}</td>`;
                    }
                    $("#tab").html(str);


                    
                    for(let i in e.data.data.province) {
                mapData.push({
                    province:e.data.data.province[i].province,
                    max_net_time : e.data.data.province[i].max_net_time,
                    children:e.data.data.province[i].children
                })
            }
                }
                showMap()

            },
        });
    }
    // 查看所有数据
    if ($('#tab tr').eq(10).nextAll().res == true) {
        $('#tab tr').hide()
    };

    // 显示地图
    function showMap() {
        var counts = ['<20ms', '20-50ms', '50-70ms', '70-100ms', '>100ms'];
        var color = ['#FB7477', '#FFC380', '#F1E550', '#86E9AA', '#30B3A3'].reverse();
        var SOC = 'CHN'

        var colors = {};
        // 地图颜色
        var getColorByDGP = function (name) {
            let index = mapData.findIndex(function (item) {
                if (name.indexOf(item.province) > -1) {
                    return true
                } else {
                    return false
                }
            });
            // '#FB7477', '#FFC380', '#F1E550', '#86E9AA', '#30B3A3'
            console.log(index);
            if (index > -1) {
                if (mapData[index].max_net_time <= 20) {
                    return '#FB7477'
                } else if (mapData[index].max_net_time > 20 && mapData[index].max_net_time <= 50) {
                    return '#FFC380'
                } else if (mapData[index].max_net_time > 50 && mapData[index].max_net_time <= 70) {
                    return '#F1E550'
                } else if (mapData[index].max_net_time > 70 && mapData[index].max_net_time <= 100) {
                    return '#86E9AA'
                } else {
                    return '#30B3A3'
                }
            }

            return '#dae2f1'
        };

        var disCountry = new AMap.DistrictLayer.Country({
            zIndex: 10,
            SOC: 'CHN',
            depth: 1,
            styles: {
                'nation-stroke': '#ff0000',
                // 'coastline-stroke': '#0088ff',
                'province-stroke': 'grey',
                'fill': function (props) {
                    return getColorByDGP(props.NAME_CHN)
                }
            }
        });
        // 显示地图
        var map = new AMap.Map("container", {
            zooms: [4, 10],
            center: [106.122082, 33.719192],
            zoom: 4,
            isHotspot: false,
            defaultCursor: 'pointer',
            layers: [
                disCountry
            ],
            viewMode: '3D',
        });
        // map.addControl(new AMap.Scale());
        // map.addControl(new AMap.ToolBar({ liteStyle: true }));
        map.on('complete', function () {
            var layer = new AMap.LabelsLayer({
                // 开启标注避让，默认为开启，v1.4.15 新增属性
                collision: false,
                // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
                animation: true,
            });
            for (var i = 0; i < LabelsData.length; i++) {
                var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
                layer.add(labelsMarker);
            }
            map.add(layer);
        });



        load(['ui/geo/DistrictExplorer', 'lib/$'], function (DistrictExplorer, $) {
            //创建一个实例
            var districtExplorer = window.districtExplorer = new DistrictExplorer({
                eventSupport: true, //打开事件支持
                map: map
            });
            //当前聚焦的区域
            var currentAreaNode = null;
            //鼠标hover提示内容
            var $tipMarkerContent = $(`<table style='width:300px' class='table table-add table-striped'></table>`);
            var tipMarker = new AMap.Marker({
                content: $tipMarkerContent.get(0),
                offset: new AMap.Pixel(0, 0),
                bubble: true
            });
            //根据Hover状态设置相关样式
            function toggleHoverFeature(feature, isHover, position) {
                tipMarker.setMap(isHover ? map : null);
                if (!feature) {
                    return;
                }
                var props = feature.properties;
                if (isHover) {
                    //更新提示内容
                    let index = mapData.findIndex(function (item) {
                        if (props.name.indexOf(item.province) > -1) {
                            return true
                        } else {
                            return false
                        }
                    })
                    let strHtml = `<thead>
                                        <tr>
                                            <th colspan='2'>${props.name}</th>
                                        </tr>
                                        <tr>
                                            <th>检测点</th>
                                            <th>耗时</th>    
                                        </tr>
                                    </thead>
                                    <tbody>
                                    `
                    if (index > -1) {
                        for (let i in mapData[index].children) {
                            strHtml += `
                                        <tr>        
                                            <td>${mapData[index].children[i].city}${mapData[index].children[i].service}</td>
                                            <td>${mapData[index].children[i].net_time}</td>
                                        </tr>
                                    `
                        }
                    } else {
                        strHtml += `<td colspan='2'>此区域无监测站</td>`
                    }
                    strHtml += `</tbody>`
                    $tipMarkerContent.html(strHtml);
                    //更新位置
                    tipMarker.setPosition(position || props.center);
                }
                $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);
                //更新相关多边形的样式
                var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
                for (var i = 0, len = polys.length; i < len; i++) {
                    polys[i].setOptions({
                        fillOpacity: isHover ? 0.5 : 0.2
                    });
                }
            }
            //监听feature的hover事件
            districtExplorer.on('featureMouseout featureMouseover', function (e, feature) {
                toggleHoverFeature(feature, e.type === 'featureMouseover',
                    e.originalEvent ? e.originalEvent.lnglat : null);
            });
            //监听鼠标在feature上滑动
            districtExplorer.on('featureMousemove', function (e, feature) {
                //更新提示位置
                tipMarker.setPosition(e.originalEvent.lnglat);

            });

            //feature被点击
            districtExplorer.on('featureClick', function (e, feature) {
                var props = feature.properties;
                console.log(props.name)
                let index = mapData.findIndex(function (item) {
                    if (props.name.indexOf(item.province) > -1) {
                        return true
                    } else {
                        return false
                    }
                })
                console.log(index)
                if (index > -1) {
                    let name = mapData[index].province
                    ajax(name)
                }
                //如果存在子节点
                // if (props.childrenNum > 0) {
                //切换聚焦区域
                switch2AreaNode(props.adcode);
                // }
            });
            //切换区域后刷新显示内容
            function refreshAreaNode(areaNode) {
                districtExplorer.setHoverFeature(null);
                //更新选中节点的class
                var $nodeEles = $('#area-tree').find('h2');
                $nodeEles.removeClass('selected');
                var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');
                //展开下层节点
                $selectedNode.closest('li').removeClass('hide-sub');
                //折叠下层的子节点
                $selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
            }
            //切换区域
            function switch2AreaNode(adcode, callback) {
                if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
                    return;
                }
                loadAreaNode(adcode, function (error, areaNode) {
                    if (error) {
                        if (callback) {
                            callback(error);
                        }
                        return;
                    }
                    currentAreaNode = window.currentAreaNode = areaNode;
                    //设置当前使用的定位用节点
                    districtExplorer.setAreaNodesForLocating([currentAreaNode]);
                    refreshAreaNode(areaNode);
                    if (callback) {
                        callback(null, areaNode);
                    }
                });
            }
            //加载区域
            function loadAreaNode(adcode, callback) {
                districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

                });
            }
            //全国
            switch2AreaNode(100000);
        });




        // 左下角的小图标
        var ul = document.querySelector('.legend ul');
        ul.innerHTML = '';
        color.forEach((c, i) => {
            ul.innerHTML +=
                '<li><span style="background: ' + c + ';"></span><a> ' + counts[i] + '</a></li>';
        });
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.ToolBar());

        document.getElementsByClassName('amap-mcode')[0].innerHTML = '-GS(2019)756号'
    }


    function ajax(a) {
        let time = new Date()
        var newTimeFullYear = time.getFullYear(),
            newTimeMonth = time.getMonth() + 1,
            newTimeDate = time.getDate(),
            newTimeHours = time.getHours(),
            newTimeMinutes = time.getMinutes(),
            newTimeSeconds = time.getSeconds(),
            newTime = newTimeFullYear + '-' + newTimeMonth + '-' + newTimeDate + ' ' + newTimeHours + ':' + newTimeMinutes + ':' + newTimeSeconds,
            oldTime = newTimeFullYear + '-' + newTimeMonth + '-' + newTimeDate + ' ' + newTimeHours - 1 + ':' + newTimeMinutes + ':' + newTimeSeconds
        $.ajax({
            type: 'POST',
            url: 'https://liu.zzgoodqc.cn/search',
            data: `start_time=${oldTime}&end_time=${newTime}&province=${a}`,
            dataType: 'json',
            success: function (e) {
                console.log(e)
                var myEcharts = echarts.init(document.getElementById('lastDiv'))
                var option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: [
                            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                            ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1]
                        ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: {},
                    grid: { top: '55%' },

                    series: [
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        }
                    ]
                }
                myEcharts.setOption(option)
            }
        })
    }
</script>
<script type="text/javascript" src="//webapi.amap.com/demos/js/liteToolbar.js?v=1.0.11"></script>
</html>